<!--重大问题列表 -->
<template>
  <div class="page keyIssuesList-page" data-page="keyIssuesList" style="z-index: 2;">
      <div class="link-page-nav">
          <a href="#" class="link"  @click="$root.backToTab()">
              <i class="iconfont icon-zuo"></i>
          </a>
      </div>
      <div class="link-page-top" style="padding-bottom: 17px;">
          <div class="link-page-list-title">重大问题</div>
      </div>
      <div class="go-history-list">
        <a class="link" style="color: #000000;" @click="goToHistory">
            <i class="iconfont icon-APPicon_lishi" style="font-size: 23px;"></i>
        </a>
     </div>
     <div class="link-page-tab" style="padding-left: 23px;">
        <div class="troubleApply-item-type" id="troubleApply-item-type_{{getNewId}}">
            <a href="#" class="col" @click="eachTypeFireHazard(1)" id="keyIssuesList_no_{{getNewId}}">未处理</a>
            <a href="#" class="col" @click="eachTypeFireHazard(2)" id="keyIssuesList_has_{{getNewId}}">已处理</a>
            <a href="#" class="col" @click="eachTypeFireHazard(3)" id="keyIssuesList_all_{{getNewId}}">全部</a>
        </div>
    </div>
    <div class="page-content infinite-scroll-content pdbottom120" style="padding-bottom: 75px;">
            <div  data-infinite-distance="55" class="tab page-content infinite-scroll-content" @infinite="loadMore" style="background: #fff;">
              <ul id="keyIssuesList_{{getNewId}}" class="fireHazardList-list-item">
              </ul>
              <div id="keyIssuesList_preloader_{{getNewId}}" class="preloader infinite-scroll-preloader"></div>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
  return {
    mounted() {
      var self = this;
      self.tabId = self.$route.params.tabID;
      if (single_Orgid == "") {
        self.orgIds=userInfor.organizationIds;
      } else {
        self.orgIds=single_Orgid;
      }
    },
    data: function () {
      return {
        tabID:null,
        pageIndex:0,
        pageSize:25,
        isInfinite:true,
        tabId:"",
        noDealNum:"",
        hasDealNum:"",
        isCollect:"",
        getNewId: (new Date()).getTime()
      }
    },
    methods: {
      backToRefresh:function(){
        var self = this;
        self.getImportantQuestionCountData_list();
        // self.eachTypeFireHazard(self.tabId);
        self.significant_problem()
      },
      significant_problem:function(){
        var self = this;
        let getAlarming = JSON.parse(localStorage.getItem("significant_problem"))
        let $ul = $("#keyIssuesList_"+self.getNewId).children()
        for(let i=0;i<$ul.length;i++){
          if(getAlarming.id == $ul.eq(i).attr("data-id") && getAlarming.status == 1){
            $ul.eq(i).empty()
          }
        }
      },
      goToHistory:function(){
        app.router.navigate("/keyIssuesHistoryList/");
      },
      getImportantQuestionCountData_list:function(){
        var self = this;
        var $ = self.$$;
        Dao.getImportantQuestionCount({
          userName: userInfor.accountName,
          organizationIds:self.orgIds
        },function(re){
          $("#keyIssuesList_no_"+self.getNewId).html("未处理 "+re.unHandlerCount);
          $("#keyIssuesList_has_"+self.getNewId).html("已处理 "+re.handlerCount);
          $("#keyIssuesList_all_"+self.getNewId).html("全部"+re.totalCount)
        });
      },
      eachTypeFireHazard:function(tabId){
        var self = this;
        var $ = self.$$;
        $("#troubleApply-item-type_" + self.getNewId + " .col").removeClass('select').eq((tabId-1)).addClass('select');
        $("#keyIssuesList_"+self.getNewId).empty();
        $("#keyIssuesList_preloader_"+self.getNewId).show();
        self.tabId = tabId;
        self.pageIndex=0;
        self.pageSize=25;
        self.isInfinite = true;
        self.showList();
      },
      showList:function() {
        var self = this;
        var $ = self.$$;
        var handlerStatus = "";
        if(self.tabId==1) {
          handlerStatus = 0;
        }else if(self.tabId==2){
          handlerStatus = 1;
        }
        Dao.getImportantQuestionList({
          userName: userInfor.accountName,
          organizationIds:self.orgIds,
          isReset:0,
          status:handlerStatus,
          startTimeStr:"",
          endTimeStr:"",
          queryType:1,
          //isCollect:0,
          account: userInfor.accountName,
          pageIndex:self.pageIndex,
          pageSize:self.pageSize
        },function(data,total){
          if(data && data.length>0){
             //没分页
            if(self.pageSize * self.pageIndex + data.length < total){
              $("#keyIssuesList_preloader_"+self.getNewId).show();
              self.isInfinite = true;
            }else {
              $("#keyIssuesList_preloader_"+self.getNewId).hide();
              self.isInfinite = false;
            }
            // $("#keyIssuesList_"+self.getNewId).empty();
            for(var i=0;i<data.length;i++) {
              keyIssuesListData_rdsp[data[i].id] = data[i];
              var dealHtml="";
              var alertHtml="";
              //判断是否完成
              if(data[i].status==0){
                   dealHtml=`<div class="bottom-right" style="width:80px;height:32px" data-status="`+data[i].status+`" data-id="`+data[i].id+`"><div style="width:80px;padding:5px 0;color:#fff;background-color:#2196f3;border-radius:15px;text-align:center;margin-top:7px">立即处理</div></div>`;
                   alertHtml="";
              }else{
                  dealHtml="";
                  alertHtml=`<div><img class='highDanger-item-overtime-img' style="left:8%" src='/ilink-app-h5-zd/static/img/rdspFile_1554726645262.png'/></div>`;
              }
              if(data[i].questionType==1 || data[i].questionType==2) { //消控室无人值守
                if(data[i].isCollect==1) {
                  $("#keyIssuesList_"+self.getNewId).append(`
                      <li>
                    <div class="item-fireHazardList-list">
                      <div class="item-fireHazardList-atten item-attend" id="atten_`+data[i].id+`">
                        <i class="iconfont icon-APPicon_guanzhu"></i>
                      </div>`+alertHtml+`
                      <div class="item-fireHazardList-img">
                        <img class="view-pic" src="`+data[i].detailPic+`" width="100%" height="100%">
                      </div>
                      <div class="item-fireHazardList-info">
                         <div class="fireHazardList-detail" data-status="`+data[i].status+`" data-id="`+data[i].id+`">
                          <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                          <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                          <div class="fireHazardList-org">
                           <span class="fireHazardList-icon">
                             <i class="iconfont icon-dingweiweizhi"></i>
                           </span>
                           <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                          </div>
                         </div>
                         <div class="fireHazardList-line"></div>
                         <div class="fireHazardList-bottom">
                           <span class="bottom-left">已持续`+data[i].intervalTime+`</span>`+dealHtml+`
                         </div>
                      </div>
                    </div>
                  </li>
                    `);
                } else {
                   $("#keyIssuesList_"+self.getNewId).append(`
                       <li data-id="`+data[i].id+`">
                    <div class="item-fireHazardList-list">
                      `+alertHtml+`
                       <div class="item-fireHazardList-img">
                        <img class="view-pic" src="`+data[i].detailPic+`" width="100%" height="100%">
                      </div>
                      <div class="item-fireHazardList-info">
                       <div class="fireHazardList-detail" data-status="`+data[i].status+`" data-id="`+data[i].id+`">
                         <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                         <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                         <div class="fireHazardList-org">
                           <span class="fireHazardList-icon">
                             <i class="iconfont icon-dingweiweizhi"></i>
                           </span>
                           <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                         </div></div>
                         <div class="fireHazardList-line"></div>
                         <div class="fireHazardList-bottom">
                           <span class="bottom-left">已持续`+data[i].intervalTime+`</span>`+dealHtml+`
                         </div>
                      </div>
                    </div>
                  </li>
                    `);
                }
              } else if(data[i].questionType==4) { // 展示消防系统完整性
                if (data[i].isCollect==1) {
                  $("#keyIssuesList_"+self.getNewId).append(`
                    <li data-id="`+data[i].id+`">
                    <div class="item-fireHazardList-list">
                       <div class="item-fireHazardList-atten item-attend" id="atten_`+data[i].id+`">
                        <i class="iconfont icon-APPicon_guanzhu"></i>
                      </div>`+alertHtml+`
                      <div class="item-fireHazardList-num">
                        <div>
                          <p>`+common.transNullundefinedToline(data[i].statusCount)+`</p>
                          <p>处故障</p>
                        </div>
                      </div>
                      <div class="item-fireHazardList-info">
                        <div class="fireHazardList-detail" data-status="`+data[i].status+`" data-id="`+data[i].id+`">
                         <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                         <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                         <div class="fireHazardList-org">
                           <span class="fireHazardList-icon">
                             <i class="iconfont icon-dingweiweizhi"></i>
                           </span>
                           <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                         </div></div>
                         <div class="fireHazardList-line"></div>
                         <div class="fireHazardList-bottom">
                           <span class="bottom-left">已持续`+data[i].intervalTime+`</span>
                           `+dealHtml+`
                         </div>
                      </div>
                    </div>
                  </li>
                   `);
                } else {
                  $("#keyIssuesList_"+self.getNewId).append(`
                    <li data-id="`+data[i].id+`">
                    <div class="item-fireHazardList-list">
                       `+alertHtml+`
                      <div class="item-fireHazardList-num">
                        <div>
                          <p>`+common.transNullundefinedToline(data[i].statusCount)+`</p>
                          <p>处故障</p>
                        </div>
                      </div>
                      <div class="item-fireHazardList-info">
                       <div class="fireHazardList-detail" data-status="`+data[i].status+`" data-id="`+data[i].id+`">
                         <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                         <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                         <div class="fireHazardList-org">
                           <span class="fireHazardList-icon">
                             <i class="iconfont icon-dingweiweizhi"></i>
                           </span>
                           <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                         </div></div>
                         <div class="fireHazardList-line"></div>
                         <div class="fireHazardList-bottom">
                           <span class="bottom-left">已持续`+data[i].intervalTime+`</span>
                           `+dealHtml+`
                         </div>
                      </div>
                    </div>
                  </li>
                   `);
                }
              } else if(data[i].questionType==5) { // 展示多次未巡检
                 if (data[i].isCollect==1) {
                  $("#keyIssuesList_"+self.getNewId).append(`
                    <li data-id="`+data[i].id+`">
                    <div class="item-fireHazardList-list">
                       <div class="item-fireHazardList-atten item-attend" 
                              id="atten_`+data[i].id+`">
                        <i class="iconfont icon-APPicon_guanzhu"></i>
                      </div>`+alertHtml+`
                      <div class="item-fireHazardList-num">
                        <div>
                          <p>`+common.transNullundefinedToline(data[i].statusCount)+`</p>
                          <p>次连续</p>
                        </div>
                      </div>
                      <div class="item-fireHazardList-info">
                       <div class="fireHazardList-detail" data-status="`+data[i].status+`" data-id="`+data[i].id+`">
                         <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                         <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                         <div class="fireHazardList-org">
                           <span class="fireHazardList-icon">
                             <i class="iconfont icon-dingweiweizhi"></i>
                           </span>
                           <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                         </div></div>
                         <div class="fireHazardList-line"></div>
                         <div class="fireHazardList-bottom">
                           <span class="bottom-left">已持续`+data[i].intervalTime+`</span>
                           `+dealHtml+`
                         </div>
                      </div>
                    </div>
                  </li>
                   `);
                 } else {
                   $("#keyIssuesList_"+self.getNewId).append(`
                    <li data-id="`+data[i].id+`">
                    <div class="item-fireHazardList-list">
                      `+alertHtml+`
                      <div class="item-fireHazardList-num">
                        <div>
                          <p>`+common.transNullundefinedToline(data[i].statusCount)+`</p>
                          <p>次连续</p>
                        </div>
                      </div>
                      <div class="item-fireHazardList-info">
                        <div class="fireHazardList-detail" data-status="`+data[i].status+`" data-id="`+data[i].id+`">
                         <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                         <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                         <div class="fireHazardList-org">
                           <span class="fireHazardList-icon">
                             <i class="iconfont icon-dingweiweizhi"></i>
                           </span>
                           <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                         </div></div>
                         <div class="fireHazardList-line"></div>
                         <div class="fireHazardList-bottom">
                           <span class="bottom-left">已持续`+data[i].intervalTime+`</span>
                           `+dealHtml+`
                         </div>
                      </div>
                    </div>
                  </li>
                   `);
                 }
              } else { //消防通道堵塞&&重要消防设施警情
               if(data[i].isCollect==1) {
                  $("#keyIssuesList_"+self.getNewId).append(`
                   <li data-id="`+data[i].id+`">
                    <div class="item-fireHazardList-list">
                      <div class="item-fireHazardList-atten item-attend" id="atten_`+data[i].id+`">
                        <i class="iconfont icon-APPicon_guanzhu"></i>
                      </div>`+alertHtml+`
                      <div class="item-fireHazardList-img">
                        <img class="view-pic" src="`+data[i].detailPic+`" width="100%" height="100%">
                      </div>
                      <div class="item-fireHazardList-info">
                        <div class="fireHazardList-detail" data-status="`+data[i].status+`" data-id="`+data[i].id+`">
                         <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                         <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                         <div class="fireHazardList-org">
                           <span class="fireHazardList-icon">
                             <i class="iconfont icon-dingweiweizhi"></i>
                           </span>
                           <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                         </div></div>
                         <div class="fireHazardList-line"></div>
                         <div class="fireHazardList-bottom">
                           <span class="bottom-left">已持续`+data[i].intervalTime+`</span>`+dealHtml+`
                         </div>
                      </div>
                    </div>
                  </li>
                    `);
                } else {
                   $("#keyIssuesList_"+self.getNewId).append(`
                     <li data-id="`+data[i].id+`">
                    <div class="item-fireHazardList-list">
                      `+alertHtml+`
                      <div class="item-fireHazardList-img">
                        <img class="view-pic" src="`+data[i].detailPic+`" width="100%" height="100%">
                      </div>
                      <div class="item-fireHazardList-info">
                       <div class="fireHazardList-detail" data-status="`+data[i].status+`" data-id="`+data[i].id+`">
                         <div class="fireHazardList-type">`+common.transNullundefinedToline(data[i].questionTypeName)+`</div>
                         <p class="fireHazardList-desc">`+common.transNullundefinedToline(data[i].selfDesc)+`</p>
                         <div class="fireHazardList-org">
                           <span class="fireHazardList-icon">
                             <i class="iconfont icon-dingweiweizhi"></i>
                           </span>
                           <span class="fireHazardList-orgName">`+common.transNullundefinedToline(data[i].organizationName)+`</span>
                         </div></div>
                         <div class="fireHazardList-line"></div>
                         <div class="fireHazardList-bottom">
                           <span class="bottom-left">已持续`+data[i].intervalTime+`</span>`+dealHtml+`
                         </div>
                      </div>
                    </div>
                   </li>
                    `);
                }
              }
              //showImage(jQuery("#item-fireHazardList-img"+data[i].id),data[i].detailPic);
              jQuery("#keyIssuesList_" + self.getNewId + " .fireHazardList-detail").off().click(function(){
                var id = jQuery(event.currentTarget).attr("data-id")
                var status = jQuery(event.currentTarget).attr("data-status")
                let problem = {
                    id:id,
                    status:status,
                }
                localStorage.setItem('significant_problem',JSON.stringify(problem))
                app.router.navigate("/keyIssuesDetail/"+id+"/0/");
              }); 

              jQuery("#keyIssuesList_" + self.getNewId + " .view-pic").off().click(function() {
                  var picUrl = $(this).attr("src").split(",");
                  openAndShowBigImage([picUrl],0);
              });

              jQuery('#atten_'+data[i].id).off("click").on("click",{'data':data[i]},
                function(e) {
                  self.optionFlow(e.data.data);
                  e.stopPropagation();
                });    
              }
              // 立即处理
              jQuery("#keyIssuesList_" + self.getNewId + " .bottom-right").off().click(function(){
                var id = $(this).attr("data-id");
                var status = $(this).attr("data-status")
                let problem = {
                    id:id,
                    status:status,
                }
                localStorage.setItem('significant_problem',JSON.stringify(problem))
                app.router.navigate("/keyIssuesCancel/" + id + "/");
              });
          } else {
            if (self.pageIndex == 0) { //暂无数据
              self.isInfinite = false;
              $("#keyIssuesList_preloader_"+self.getNewId).hide();
              $("#keyIssuesList_"+self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
            }
          }
        });
      },
      //加载更多
      loadMore:function(){
        var self = this;
        if (!self.isInfinite) return;
        self.isInfinite = false;
        setTimeout(function () {
          self.pageIndex++;
          self.showList();
        }, 1000);
      },
      optionFlow: function (data) { //关注和取消关注事件
        var self = this;
        if (data.isCollect == 1) { // 取消关注
            //取消关注
            common.loading(1);
                  Dao.focusOnOff({
                    userAccount: userInfor.accountName,
                    type: "3",
                    userName: userInfor.accountName,
                    concemId: data.id
                  }, function (data) {
                    common.loading(0);
                    isCollect = 0;
                    app.methods.showToastCenter("取消关注成功");
                    self.showList();
                  }, function (e) {
                    common.loading(0);
                    app.methods.showToastCenter("取消关注失败");
                  });
        } else {
                common.loading(1);
                Dao.addUserConcem({
                  userAccount: userInfor.accountName,
                  type: "3",
                  userName: userInfor.accountName,
                  concemId: data.id
                }, function (data) {
                  common.loading(0);
                  isCollect = 1;
                  app.methods.showToastCenter("关注成功");
                  self.showList();
                }, function (e) {
                  common.loading(0);
                  app.methods.showToastCenter("关注失败");
                });
              }
        },
    },
    on: {
      pageInit: function (e, page) {
        // keyIssuesListData_rdsp=[];
        var self = this;
        keyIssuesListData_rdsp=[];
        self.getImportantQuestionCountData_list();
        self.eachTypeFireHazard(self.tabId);
      },
      pageAfterIn:function (e, page) {
      }
    }
  }
</script>
<style scoped>
.fireHazardList-list-item {
	padding-top: 40px;
	margin: 10px 0px;
}
</style>
